<template>
	<view class="jk-progress">
        <view class="jk-progress-outer">
            <view class="jk-progress-inner" :style="[getPrecent]"></view>
        </view>
        <view class="jk-progress-text">
            <slot>{{ precent }}%</slot>
        </view>
    </view>
</template>

<script>
	export default {
        name: 'Progress',
        props: {
            precent: {
                type: Number,
                default: 0
            },
            status: {
                type: String,
                default: 'default',
                validator(value){
                    return ['default', 'primary', 'success', 'warning', 'error'].includes(value)
                }
            },
            color: {
                type: [String, Function],
            }
        },
		data() {
			return {
				
			};
		},
        methods: {
            
        },
        computed: {
            getPrecent(){
                return {
                    width: this.precent+'%'
                }
            },
            getColor(){
                if(this.color){
                    return {
                        background: this.color
                    }
                }else{
                    return {}
                }
            }
        }
	}
</script>

<style lang="scss">
.jk-progress{
    width: 100%;
    position: relative;
    display: flex;
    justify-content: space-between;
    font-size: 28upx;
    align-items: center;
    &-outer{
        position: relative;
        height: 18upx;
        background-color: $uni-color-info-light-9;
        flex: auto;
        border-radius: 100upx;
        overflow: hidden;
    }
    &-inner{
        height: 100%;
        width: 100%;
        background-color: $uni-color-primary;
        line-height: 1;
        white-space: nowrap;
        transition: width .6s ease;
    }
    &-text{
        flex: 0 0 100upx;
        box-sizing: border-box;
        padding-left: 10upx;
    }
}
</style>
